window.onload = function () {
    //获取网页中所有表单元素
    var inputs = document.querySelectorAll('input');
    //遍历表单元素，检查表单元素上是否存在自定义属性
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.dataset['req']) {
            //表单元素上有必填自定义属性
            var errMsg = input.dataset['err-msg'] || '数据不能为空';
            var sucMsg = input.dataset['suc-msg'] || '有效数据';
            //给表单元素绑定失去焦点的处理函数
            bind(input, { name: 'req' }, errMsg, sucMsg);
        } else if (input.dataset['minLen']) {
            var errMsg = input.dataset['err-msg'] || '数据的长度不能小于' + input.dataset['minLen'];
            var sucMsg = input.dataset['suc-msg'] || '有效数据';
            //给表单元素绑定失去焦点的处理函数
            bind(input, { name: 'min-len', value: input.dataset['minLen'] }, errMsg, sucMsg);
            // } else if (input.dataset['maxLen']) {
            //     var errMsg = input.dataset['err-msg'] || '数据的长度不能大于' + input.dataset['maxLen'];
            //     var sucMsg = input.dataset['suc-msg'] || '有效数据';
            //     //给表单元素绑定失去焦点的处理函数
            //     bind(input, { name: 'max-len', value: input.dataset['maxLen'] }, errMsg, sucMsg);
        } else if (input.dataset['phone']) {
            var errMsg = input.dataset['err-msg'] || '请输入正确的格式 3~4位-7~8位 或 7~8位 数字';
            var sucMsg = input.dataset['suc-msg'] || '有效数据';
            //给表单元素绑定失去焦点的处理函数
            bind(input, { name: 'phone' }, errMsg, sucMsg);
        } else if (input.dataset['email']) {
            var errMsg = input.dataset['err-msg'] || '请输入不以0开头的六位数字';
            var sucMsg = input.dataset['suc-msg'] || '有效数据';
            //给表单元素绑定失去焦点的处理函数
            bind(input, { name: 'email' }, errMsg, sucMsg);
        }
    }


    // 绑定失去焦点处理函数
    // el 表单元素
    // type  验证类型  req 必填  minlen 最小长度
    // errMsg 错误提示信息
    // sucMsg 正确提示信息
    function bind(el, type, errMsg, sucMsg) {
        //构造正则表达式
        var reg = null;
        switch (type.name) {
            case 'req': reg = /^\w+$/ig; break;
            case 'min-len': var con = '\\w{' + type.value + '}';
                reg = new RegExp(con, 'ig');
                break;
            // case 'max-len': var con = '\\w{' + type.value + ',10}';
            //     reg = new RegExp(con, 'ig');
            //     break;
            // 正确格式为：XXXX - XXXXXXX，XXXX - XXXXXXXX，XXX - XXXXXXX，
            // XXX - XXXXXXXX，XXXXXXX，XXXXXXXX。
            case 'phone': reg = /^((\d{3,4}-\d{7,8})|(\d{7,8}))$/
                // reg = /^((\d{3,4})-(\d{7,8}))|\d{7,8}$/;
                break;
            case 'email': reg = /^[1-9][0-9]{5}$/;
                break;
        }
        //获取显示提示信息对象
        var td = el.parentNode.nextElementSibling;
        //失去焦点事件处理函数
        input.onblur = function () {
            if (!reg.test(this.value)) {
                td.innerHTML = errMsg;
                td.style.color = 'red';
                return false;
            } else {
                td.innerHTML = sucMsg;
                td.style.color = 'green';
                return true;
            }
        }
    }
}


